<template>
    <section class="wrapper">
        <div
            class="question-item"
            v-for="(item,index) in submit_config"
            :key="item.name"
        >
            <!--标题-->
            <div class="question-item-title">
                {{ index + 1 }}、{{ item.title }}
            </div>
            <!--标题描述-->
            <div
                class="question-item-title__intro"
                v-if="item.intro"
            >
                {{ item.intro }}
            </div>
            <div class="question-item-content">
                <!--单项填空-->
                <template v-if="item.type === 1">
                    <div class="input-view">
                        {{ item.default.value }}
                    </div>
                </template>
                <!--多项填空-->
                <template v-if="item.type === 11">
                    <div class="option-list">
                        <div
                            class="option-item"
                            v-for="(option, i) in item.options"
                            :key="i"
                        >
                            <div class="option-title">
                                {{ option.title }}
                            </div>
                            <div class="input-view">
                                {{ option.default_edit_content }}
                            </div>
                        </div>
                    </div>
                </template>
                <!--单选/多选题-->
                <template v-if="item.type === 2 || item.type === 3">
                    <div class="select-option-list">
                        <div
                            class="select-option-item"
                            v-for="(option, i) in item.options"
                            :key="i"
                        >
                            <div class="option-title">
                                <template v-if="item.type === 2">
                                    <div class="title-icon">
                                        <i
                                            v-if="option.default_selected"
                                            class="iconfont el-icon-hand-danxuan1"
                                        />
                                        <div
                                            v-else
                                            class="radio-default-icon"
                                        />
                                    </div>
                                </template>
                                <template v-if="item.type === 3">
                                    <div
                                        class="title-icon checkbox"
                                        :class="{'selected': option.default_selected}"
                                    >
                                        <i
                                            v-if="option.default_selected"
                                            class="iconfont el-icon-hand-yixuanze"
                                        />
                                        <div
                                            v-else
                                            class="checkbox-default-icon"
                                        />
                                    </div>
                                </template>
                                <div class="title-value">{{ option.title }}</div>
                            </div>
                            <div class="option-intro">
                                {{ option.intro }}
                            </div>
                            <div
                                class="input-view"
                                style="margin-top: 12px; margin-left: 28px"
                                v-if="option.option_type === 2"
                            >
                                {{ option.default_edit_content ? option.default_edit_content : '' }}
                            </div>
                        </div>
                    </div>
                </template>
                <!--图片上传-->
                <template v-if="item.type === 5">
                    <div
                        class="upload-image-list"
                        v-if="item.default.value.length"
                    >
                        <div
                            class="upload-image-item"
                            v-for="(option, i) in item.default.value"
                            :key="i"
                            @click="showPreview(item.default.value.map(image => image.value), i)"
                        >
                            <img
                                :src="option.value"
                                alt=""
                            >
                        </div>
                    </div>
                    <div
                        class="image-empty"
                        v-else
                    >
                        <div class="icon">
                            <i class="iconfont el-icon-hand-tupian"/>
                        </div>
                        <div class="text">
                            上传图片
                        </div>
                    </div>
                </template>
                <!--单选/多选图片-->
                <template v-if="item.type === 10 || item.type === 13">
                    <div
                        class="select-image-list"
                        v-if="item.options.length"
                    >
                        <div
                            v-for="(option, i) in item.options"
                            :key="i"
                            class="select-image-item"
                            :class="{'selected': option.default_selected}"
                        >
                            <img
                                :src="option.image_url"
                                alt=""
                                class="option-image"
                                @click="showPreview(item.options.map(image => image.image_url), i)"
                            >
                            <div
                                class="option-intro"
                                v-if="option.intro"
                                @click="showOptionIntro(option.intro)"
                            >
                                <i class="el-icon-more"/>
                            </div>
                            <div class="option-title">
                                <template v-if="item.type === 13">
                                    <div class="title-icon">
                                        <i
                                            v-if="option.default_selected"
                                            class="iconfont el-icon-hand-danxuan1"
                                        />
                                        <div
                                            v-else
                                            class="radio-default-icon"
                                        />
                                    </div>
                                </template>
                                <template v-if="item.type === 10">
                                    <div
                                        class="title-icon checkbox"
                                        :class="{'selected': option.default_selected}"
                                    >
                                        <i
                                            v-if="option.default_selected"
                                            class="iconfont el-icon-hand-yixuanze"
                                        />
                                        <div
                                            v-else
                                            class="checkbox-default-icon"
                                        />
                                    </div>
                                </template>
                                <div class="title-value">{{ option.title }}</div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </section>
</template>

<script>
import {videoPreviewDialog} from "@/components/common/video-preview";
import ImgPreview from "@/components/common/img-preview";


export default {
    name: "CustomFormQuestion",
    components: {ImgPreview},
    props: {
        submit_config: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },

    methods: {

        /**
         * 预览图片
         * @param   {String}    images      //单图预览
         * @param   {Array}     images      //多图预览
         * @param index
         */
        showPreview(images, index) {
            if (images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$message({
                    type: 'warning',
                    message: '图片类型错误'
                });
            }
        },

        /**
         * 预览视频
         * @param url
         */
        previewVideo(url) {
            videoPreviewDialog({
                previewUrl: url
            });
        },

        /**
         * 现在选项介绍文案
         * @param intro
         */
        showOptionIntro(intro) {
            this.$zdPrompt({
                title: '图片选项说明',
                showText: intro
            });
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    .question-item {
        margin-top: 52px;
        &-title {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 22px;
            position: relative;
            &:before {
                content: "*";
                font-size: 16px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #F53341;
                line-height: 22px;
                position: absolute;
                left: -10px;
                top: 0;
            }
        }
        &-title__intro {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 17px;
            margin-top: 10px;
        }
        &-content {
            margin-top: 16px;
            .input-view {
                min-height: 54px;
                background: #F7F7F7;
                border-radius: 4px;
                border: 1px solid #D8DCE5;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 24px;
                padding: 15px 18px;
                word-break: break-all;
            }
            // 多项填空
            .option-list {
                .option-item {
                    margin-bottom: 30px;
                    .option-title {
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        line-height: 20px;
                        margin-bottom: 12px;
                    }
                }
            }
            // 单选多选
            .select-option-list {
                .select-option-item {
                    margin-bottom: 24px;
                    .option-title {
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;
                        .title-icon {
                            margin-right: 10px;
                            .radio-default-icon {
                                width: 18px;
                                height: 18px;
                                border-radius: 50%;
                                background: #F0F2F7;
                                border: 1px solid #DCDFE6;
                            }
                            .checkbox-default-icon {
                                width: 18px;
                                height: 18px;
                                background: #F0F2F7;
                                border-radius: 3px;
                                border: 1px solid #DCDFE6;
                            }
                            .iconfont {
                                font-size: 18px;
                                color: #20A0FF;
                            }
                            &.checkbox {
                                width: 18px;
                                height: 18px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border-radius: 3px;
                                &.selected {
                                    background: #20A0FF;
                                }
                                .iconfont {
                                    color: #fff;
                                    font-size: 14px;
                                }
                            }
                        }
                        .title-value {
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #333333;
                            line-height: 20px;
                        }
                    }
                    .option-intro {
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #999999;
                        line-height: 17px;
                        padding-left: 28px;
                    }
                }
            }
            // 上传图片
            .upload-image-list {
                display: flex;
                flex-wrap: wrap;
                .upload-image-item {
                    width: 132px;
                    height: 132px;
                    border-radius: 2px;
                    overflow: hidden;
                    margin-right: 15px;
                    margin-bottom: 20px;
                    cursor: pointer;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .image-empty {
                width: 132px;
                height: 132px;
                background: #F7F7F7;
                border-radius: 2px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                .iconfont {
                    font-size: 36px;
                    color: #999999;
                }
                .text {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                    line-height: 20px;
                    margin-top: 16px;
                }
            }
            // 单选多选图片
            .select-image-list {
                display: flex;
                flex-wrap: wrap;
                align-items: flex-start;
                .select-image-item {
                    margin-right: 15px;
                    margin-bottom: 20px;
                    width: 132px;
                    min-height: 172px;
                    background: #FFFFFF;
                    border-radius: 4px;
                    overflow: hidden;
                    border: 1px solid #EEEEEE;
                    position: relative;
                    &.selected {
                        border: 1px solid #20A0FF;
                    }
                    .option-image {
                        width: 132px;
                        height: 132px;
                        cursor: pointer;
                    }
                    .option-intro {
                        position: absolute;
                        width: 24px;
                        height: 24px;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #fff;
                        background: rgba(0, 0, 0, 0.6);
                        top: 10px;
                        right: 10px;
                        cursor: pointer;
                    }
                    .option-title {
                        display: flex;
                        align-items: flex-start;
                        padding: 12px 10px;
                        .title-icon {
                            margin-right: 10px;
                            margin-top: 1px;
                            .radio-default-icon {
                                width: 18px;
                                height: 18px;
                                border-radius: 50%;
                                background: #F0F2F7;
                                border: 1px solid #DCDFE6;
                            }
                            .checkbox-default-icon {
                                width: 18px;
                                height: 18px;
                                background: #F0F2F7;
                                border-radius: 3px;
                                border: 1px solid #DCDFE6;
                            }
                            .iconfont {
                                font-size: 18px;
                                color: #20A0FF;
                            }
                            &.checkbox {
                                width: 18px;
                                height: 18px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border-radius: 3px;
                                &.selected {
                                    background: #20A0FF;
                                }
                                .iconfont {
                                    color: #fff;
                                    font-size: 14px;
                                }
                            }
                        }
                        .title-value {
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #333333;
                            line-height: 20px;
                        }
                    }
                }
            }

        }
    }
}
</style>
